<template>
    <div>
<!--        <el-row :gutter="20" class="stream-row">-->
<!--&lt;!&ndash;            <el-col :span="1.5">&ndash;&gt;-->
<!--&lt;!&ndash;                <el-select v-model="channelId" :placeholder="$t('views.components.player.deviceLiveStream.48750-1')" @change="changeChannel()">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-option v-for="(option, index) in channelList" :key="`${index}-${option.value}`" :label="option.label" :value="option.value"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-select>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-col :span="1.5" style="line-height: 36px">&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="font-size: 14px">{{ $t('views.components.player.deviceLiveStream.48750-2') }}：</span>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-switch v-model="pushStream" :disabled="channelId === ''" @change="startPushStream"></el-switch>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-col class="stream-col" :span="1.5">&ndash;&gt;-->
<!--&lt;!&ndash;                <span class="stream-col-text">{{ $t('views.components.player.deviceLiveStream.48750-3') }}：</span>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-switch v-model="playrecord" :disabled="channelId === ''" @change="startPlayRecord"></el-switch>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-col>&ndash;&gt;-->
<!--        </el-row>-->

        <player ref="player" :playerinfo="playinfo" :deviceId="deviceId" :channelId="channelId"></player>
    </div>
</template>
<script>
import player from '@/views/components/player/player.vue';
import { startPlay, closeStream, listChannel } from '@/api/iot/channel';
import { startPlayRecord } from '@/api/iot/record';

export default {
    name: 'device-live-stream',
    components: {
        player,
    },
    data() {
        return {
            deviceInfo: {},
            deviceId: '',
            channelId: '',
            streamId: '',
            ssrc: '',
            playurl: '',
            playinfo: { playtype: 'play' },
            playrecord: false,
            playrecording: false,
            playing: false,
            retrycount: 0,
        };
    },
    beforeDestroy() {
        console.log('beforeDestroy');
        this.closeDestroy(false);
    },
    methods: {
        changeChannel() {
          this.channelId = this.deviceInfo.channelSipId;
          this.deviceId = this.deviceInfo.deviceSipId;
          this.playinfo.channelId = this.channelId;
          // this.playinfo = {
          //   playtype: 'play',
          //   deviceId: this.deviceId,
          //   channelId: this.channelId,
          // };
            this.startPlayer();
        },
        // 直播播放
        TimeoutCallback() {
            this.closeDestroy(false);
            this.retrycount = 0;
            setTimeout(() => {
                this.startPlayer();
            }, 1000);
        },
        // 开启直播播放器
        startPlayer() {
          console.log(this.deviceInfo.status + "状态")
            if (!this.channelId) {
                console.log('直播录像通道: [' + this.channelId + ']');
                return;
            }
            if (this.deviceInfo.status !== 3) {
                if (this.deviceInfo.status === 1) {
                    this.$message({
                        type: 'warning',
                        message: this.$t('device.device-variable.930930-0'),
                    });
                } else if (this.deviceInfo.status === 2) {
                    this.$message({
                        type: 'warning',
                        message: this.$t('device.device-variable.930930-1'),
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: this.$t('device.device-variable.930930-2'),
                    });
                }
                return;
            }
            if (this.playing) {
                this.closeDestroy(false);
            }
            this.$refs.player.registercallback('loadingTimeout', this.TimeoutCallback);
            this.$refs.player.registercallback('delayTimeout', this.TimeoutCallback);
            if (this.playrecord) {
                startPlayRecord(this.deviceId, this.channelId).then((response) => {
                    console.log('开始录像：' + this.deviceId + ' : ' + this.channelId);
                    const res = response.data;
                    this.streamId = res.streamId;
                    this.playurl = res.playurl;
                    this.$refs.player.play(this.playurl);
                    this.playing = true;
                    this.playrecording = true;
                });
            } else {
                startPlay(this.deviceId, this.channelId).then((response) => {
                    console.log('开始推流: [' + this.channelId + ']');
                    const res = response.data;
                    this.streamId = res.streamId;
                    this.playurl = res.playurl;
                    this.$refs.player.play(this.playurl);
                    this.playing = true;
                    this.playrecording = false;
                });
            }
        },
        closeStream(force) {
            if (force) {
                if (this.playing && this.streamId) {
                    console.log('强制关闭推流: [' + this.streamId + ']');
                    closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
                        this.streamId = '';
                        this.ssrc = '';
                        this.playurl = '';
                    });
                    this.playing = false;
                    this.playrecording = false;
                }
            } else {
                if (this.playrecording === true) {
                    return;
                }
                if (this.playing && this.streamId) {
                    console.log('关闭推流: [' + this.streamId + ']');
                    closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
                        this.streamId = '';
                        this.ssrc = '';
                        this.playurl = '';
                    });
                    this.playing = false;
                    this.playrecording = false;
                }
            }
        },
        closeDestroy(force) {
            this.closeStream(force);
            this.destroy();
        },
        destroy() {
            if (this.$refs.player) {
              this.$refs.player.destroy();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.stream-row {
  margin-bottom: px2vh(16);
}

.stream-col {
  height: px2vh(36);
  line-height: px2vh(36);

  .stream-col-text {
    font-size: px2font(14);
    color: #fff;
  }
}

/* 1. 开关整体容器（基于视窗宽度自适应） */
::v-deep .el-switch {
  width: px2vw(50); /* 整体点击区域宽度（相对屏幕宽度） */
}

/* 2. 开关轨道（背景条）尺寸 */
::v-deep .el-switch__core {
  width: px2vw(45) !important; /* 轨道宽度（相对屏幕宽度） */
  height: px2vw(20) !important; /* 轨道高度（与宽度成比例，保持2:1） */
}

/* 3. 开关滑块（圆形按钮）尺寸 */
::v-deep .el-switch__core:after {
  width: px2vw(16) !important; /* 滑块宽度（略小于轨道高度） */
  height: px2vw(16) !important; /* 滑块高度（与宽度一致，保持圆形） */
  top: px2vw(1) !important; /* 顶部偏移（相对单位，随轨道缩放） */
  left: px2vw(1) !important; /* 左侧偏移（关闭状态） */
}

/* 4. 开启状态时，滑块的位置（按比例计算） */
::v-deep .el-switch.is-checked .el-switch__core:after {
  /* 移动距离 = 轨道宽度 - 滑块宽度 - 2×偏移量（保持比例） */
  transform: translateX(px2vw(25)) !important;
  /* 计算逻辑：40(轨道宽) - 18(滑块宽) - 2×1(偏移) = 20 → 用px2vw(20)保持比例 */
}
</style>
